<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>tripleCount:{{tripleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
        <p>
            <button @click="doubleCount+=2">doubleCount+2</button>
        </p>
        <p>
            <button @click="tripleCount+=3">tripleCount+2</button>
        </p>
    </div>
</body>
<script>
    // 计算属性(派生值或衍生值)  =>  实力化对象的属性中
    // 相当于给实力化对象绑定了一个新属性(派生值或衍生值), 依赖于data中的一个或多个属性得到的一个新属性, 当依赖的属性发生变化时,计算属性中的函数也会重新执行,得到一个新值,并缓存计算的结果, 如果依赖的属性没有发生变化时,会一直使用缓存的结果
    // 注意: 
    //  1. 计算属性的初始值会在实例化对象创建之后, Vue把模板编译为虚拟DOM之前默认先执行一次 
    //  2. 计算属性是基于它们的响应式依赖进行缓存的
    //  3. 计算属性只能执行同步操作 (不支持异步)

    // 可以理解为: 
    // 计算属性的函数默认在初始化阶段执行一次, 后续是否执行,完全看它依赖的数据(data中的相关属性) => 默认是被动变化


    // 计算属性(派生值 衍生值), 依赖于data中的一个或多个属性得到的一个新属性  => 默认是被动变化(只有取值,没有赋值)


    var vm= new Vue({
        // el:"#app",
        data:{
            count:1,
        },
        methods: {
            addCount(){
                this.count++
            }    
        },
        computed:{
            // 计算属性默认只有取值没有赋值(被动变化) => 以下写法,如果对计算属性进行赋值 => 报错
            // doubleCount:function(){
            //     return this.count * 2;
            // },
            // tripleCount:function(){
            //     return this.count * 3;
            // },

            // 如果向对计算属性赋值 , 可以给计算属性分别配置取值拦截和赋值拦截
            doubleCount:{
                // get => 对计算属性进行取值时触发  =>  基于它们的响应式依赖进行缓存的(被动变化)
                get:function(){
                    return this.count * 2;
                },
                // set =>  对计算属性进行赋值时触发(把val赋值给对应的计算属性是由Vue内部操作的) => 主动变化
                set:function(val){
                    this.count = val / 2;
                }
            },
            tripleCount:{
                get:function(){
                    return this.count * 3;
                },
                set:function(val){
                    this.count = val / 3;
                }
            }
        }
    })

    vm.$mount("#app");

</script>
</html>